<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <title>Matrimony | Search</title>
        <link href="css/bootstrap.css" rel="stylesheet" media="screen"/>
        <link rel="stylesheet" href="css/style.css"/>
        <style>
            p, h3, b {
                margin-bottom:15px;
                font-size: 1.2em;
                line-height: 1.5em;
            }
            .tabs li {
                list-style:none;
                display:inline;
            }
            .tabs a {
                padding:5px 55px;
                display:inline-block;
                background:#666;
                color:#fff;
                text-decoration:none;
            }
            .tabs a.active {
                background:#fff;
                color:#444444;
            }
        </style>

        <script src="js/jquery.min.js"></script>
        <script>
            // Wait until the DOM has loaded before querying the document
            $(document).ready(function() {
                $('ul.tabs').each(function() {
                    // For each set of tabs, we want to keep track of
                    // which tab is active and it's associated content
                    var $active, $content, $links = $(this).find('a');
                    // If the location.hash matches one of the links, use that as the active tab.
                    // If no match is found, use the first link as the initial active tab.
                    $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
                    $active.addClass('active');
                    $content = $($active.attr('href'));
                    // Hide the remaining content
                    $links.not($active).each(function() {
                        $($(this).attr('href')).hide();
                    });
                    // Bind the click event handler
                    $(this).on('click', 'a', function(e) {
                        // Make the old tab inactive.
                        $active.removeClass('active');
                        $content.hide();
                        // Update the variables with the new link and content
                        $active = $(this);
                        $content = $($(this).attr('href'));
                        // Make the tab active.
                        $active.addClass('active');
                        $content.show();
                        // Prevent the anchor's default click action
                        e.preventDefault();
                    });
                });
                $(".controls :input").focus();
            });
        </script>
    </head>
    <body>
        <div id="page-wrap">
            <div id="banner">
                <h1><a href="index.xhtml">Matrimony</a></h1>
            </div><!--End banner-->
            <div id="main-content">
                <div id="sidebar">
                    <h:form>
                    <div id="mainNav">
                        <ul>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoHome()}" value="Home"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoRegister()}" value="Register"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoSearch()}" value="Search"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoService()}" value="Service"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoContact()}" value="Contact"/></li>
                        </ul>
                    </div><!--End mainNav-->
                    </h:form>
                    <br/>
                </div><!--End sidebar-->

                <div id="primary">
                    <div class="post-item">
                        <h1><a href="#">LOOKING FOR</a></h1><br/>
                        <ul class="tabs">
                            <li>
                                <b><a class="active" href="#tab1">SEARCH BY NAME</a></b>
                            </li>
                            <li>
                                <b><a href="#tab2">ADVANCED SEARCH</a></b>
                            </li>
                        </ul>
                        <f:view>
                            <h:form>


                                <div id="tab1">
                                    <br/><h3><b>Name</b></h3>
                                    <div class="control-group">
                                        <div class="controls">
                                            <h:inputText id="fullname" class="form-control" required="true" requiredMessage="please enter some name" maxlength="20" value="#{matrinonyBean_c.full_Name}" />
                                            <div class="help-block"></div>
                                            <h:message for="fullname" errorStyle="color:red"/>

                                        </div>
                                    </div>
                                    <h:commandLink class="btn btn-primary pull-right" value="Search"/>
                                </div>
                                </h:form>
                                <div id="tab2" style="display: none;">
                                    <br/><h3><b>Looking for</b></h3>
                                    <div class="control-group">
                                        <div class="controls">
                                            <label>Search by :</label>
                                            <select class="form-control" id="name">
                                                <option value="">-----choose-----</option>
                                                <option value="br">Bride</option>
                                                <option value="gr">Groom</option>
                                            </select>
                                            <div class="help-block"></div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <div class="controls">
                                            <label>Age :</label>
                                            <input type="number" name="age" min="18" max="50"/> -
                                            <input type="number" name="age" min="18" max="50"/>
                                            <div class="help-block"></div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <div class="controls">
                                            <label>Caste :</label>
                                            <select class="form-control" id="name">
                                                <option value="">-----Doesn't Matter-----</option>
                                                <option value=""></option>
                                                <option value=""></option>
                                            </select>
                                            <div class="help-block"></div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <div class="controls">
                                            <label>Religions :</label>
                                            <select class="form-control" id="name">
                                                <option value="">-----Doesn't Matter-----</option>
                                                <option value=""></option>
                                                <option value=""></option>
                                            </select>
                                            <div class="help-block"></div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <div class="controls">
                                            <label>Mother Tonge :</label>
                                            <select class="form-control" id="name">
                                                <option value="">-----Doesn't Matter-----</option>
                                                <option value=""></option>
                                                <option value=""></option>
                                            </select>
                                            <div class="help-block"></div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <div class="controls">
                                            <label>Country living in :</label>
                                            <select class="form-control" id="name">
                                                <option value="">-----Doesn't Matter-----</option>
                                                <option value=""></option>
                                                <option value=""></option>
                                            </select>
                                            <div class="help-block"></div>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary pull-right">Search</button><br/>
                                </div>
                                <div id="primary">
                                    <ui:repeat value="#{matrinonyBean_c.searchByName()}" var="m">
                                        <div class="post-item">
                                            <div class="metadata">
                                                <img src="images/motive.jpg" alt="post image" />
                                                <p class="post"><strong>Name</strong>: <h:outputText value="#{m.full_Name}"/></p>
                                                <p class="date"><strong>Age</strong>: <h:outputText value="#{m.dateOfBirth}"/></p>
                                                <p class="comments"><strong>Marital Status</strong>: <h:outputText value="#{m.marital_Status}"/></p>
                                            </div><!--End metadata-->
                                            <h1><a href="#">Detail Information</a></h1>
                                            <p>
                                                <h:outputText value="#{m.family_Details}"/>
                                            </p>
                                            <div class="readMore"><a href="detail.html">View Profile Detail</a></div>
                                        </div><!--End post-item-->
                                    </ui:repeat>
                                </div><!--End primary-->
                            
                        </f:view>



                    </div><!--End post-item-->
                </div><!--End primary-->
            </div><!--End main content-->

            <div id="footer">
                 <h:form>
                <div id="footerNav">
                    <p class="copyright">Copyright 2013 Group 3 - C1103L - Matrimony site .</p>
                    <ul>
                        <li><h:commandLink action="#{matrinonyBean_c.gotoHome()}" value="Home"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoRegister()}" value="Register"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoSearch()}" value="Search"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoService()}" value="Service"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoContact()}" value="Contact"/></li>
                    </ul>

                </div><!--End footerNav-->
                </h:form>
                <div id="footerInfo">
                    <img src="images/author.png" alt="author comment" />
                    <div class="rules">
                        <div class="inside">
                            <p>
                                The wedding event is no more a home manageable affairs where one requires the different service providers to be contacted and negotiated. Furthermore, the precious time and resources consumed during the whole process of finding and searching the ideal match. In Today’s generation the search of the life partner is searched through internet. The candidate can input his/her requirement according to their needs and perform search operation to get their Ideal Match. This process has now gain success it is less time consuming and multiple searches can be implemented in less time.
                            </p>
                            <ol>
                                <li>If you want to <a href="search.html">look for</a> groom or bride , please go to <a href="index.html">Matrimony</a> site .</li>
                                <li><a href="contact.html">Contact us</a> when you have any questions nedd answer .</li>
                                <li>Please <a href="register.html">register</a> to experience .</li>
                            </ol>

                            <p><a href="index.html">That's it! Enjoy your stay and remember to comeback often.</a></p>
                        </div><!--End inside-->
                    </div><!--End rules-->
                </div><!--End footerInfo-->
            </div><!--End footer-->
        </div><!--End page wrap-->
    </body>
</html>
